
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="http://127.0.0.1:8083/assets/echarts.min.js"></script>
    <script src="http://127.0.0.1:8083/assets/echarts-liquidfill.min.js"></script>
    <link href="http://127.0.0.1:8083/assets/bulma.min.css" rel="stylesheet">
</head>

<body>
<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;">
    <select onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http://127.0.0.1:8080/liquid">Liquid-(水球图)</option>
        <option value="http://127.0.0.1:8080/bar3D">Bar3D-(3D 柱状图)</option>
        <option value="http://127.0.0.1:8080/boxPlot">BoxPlot-(箱线图)</option>
        <option value="http://127.0.0.1:8080/effectScatter">EffectScatter-(动态散点图)</option>
        <option value="http://127.0.0.1:8080/funnel">Funnel-(漏斗图)</option>
        <option value="http://127.0.0.1:8080/gauge">Gauge-仪表盘</option>
        <option value="http://127.0.0.1:8080/geo">Geo-地理坐标系</option>
        <option value="http://127.0.0.1:8080/graph">Graph-关系图</option>
        <option value="http://127.0.0.1:8080/heatMap">HeatMap-热力图</option>
        <option value="http://127.0.0.1:8080/kline">Kline-K 线图</option>
        <option value="http://127.0.0.1:8080/line">Line-(折线图)</option>
        <option value="http://127.0.0.1:8080/line3D">Line3D-(3D 折线图)</option>
        <option value="http://127.0.0.1:8080/bar">Bar-(柱状图)</option>
        <option value="http://127.0.0.1:8080/map">Map-(地图)</option>
        <option value="http://127.0.0.1:8080/overlap">Overlap-(重叠图)</option>
        <option value="http://127.0.0.1:8080/parallel">Parallel-(平行坐标系)</option>
        <option value="http://127.0.0.1:8080/pie">Pie-(饼图)</option>
        <option value="http://127.0.0.1:8080/radar">Radar-(雷达图)</option>
        <option value="http://127.0.0.1:8080/sankey">Sankey-(桑基图)</option>
        <option value="http://127.0.0.1:8080/scatter">Scatter-(散点图)</option>
        <option value="http://127.0.0.1:8080/scatter3D">Scatter-(3D 散点图)</option>
        <option value="http://127.0.0.1:8080/surface3D">Surface3D-(3D 曲面图)</option>
        <option value="http://127.0.0.1:8080/themeRiver">ThemeRiver-(主题河流图)</option>
        <option value="http://127.0.0.1:8080/wordCloud">WordCloud-(词云图)</option>
        <option value="http://127.0.0.1:8080/page">Page-(顺序多图)</option>
    </select></div>

    
<div class="container">
    <div class="item" id="igyksZoOFZal"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_igyksZoOFZal = echarts.init(document.getElementById('igyksZoOFZal'), "white");
    let option_igyksZoOFZal = {
        title: {"text":"Liquid-示例图",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":false},"waveAnimation":true,"data":[0.3,0.4,0.5],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_igyksZoOFZal.setOption(option_igyksZoOFZal);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="PPkocKOuSkTt"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_PPkocKOuSkTt = echarts.init(document.getElementById('PPkocKOuSkTt'), "white");
    let option_PPkocKOuSkTt = {
        title: {"text":"Liquid-展示 Label",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":false},"waveAnimation":true,"data":[0.3,0.4,0.5],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_PPkocKOuSkTt.setOption(option_PPkocKOuSkTt);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="FeySfZiNIpQJ"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_FeySfZiNIpQJ = echarts.init(document.getElementById('FeySfZiNIpQJ'), "white");
    let option_FeySfZiNIpQJ = {
        title: {"text":"Liquid-显示轮廓",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":true},"waveAnimation":true,"data":[0.3,0.4,0.5],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_FeySfZiNIpQJ.setOption(option_FeySfZiNIpQJ);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="aYhxDlXhjtvN"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_aYhxDlXhjtvN = echarts.init(document.getElementById('aYhxDlXhjtvN'), "white");
    let option_aYhxDlXhjtvN = {
        title: {"text":"Liquid-关闭动画",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":true},"waveAnimation":false,"data":[0.3,0.4,0.5],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_aYhxDlXhjtvN.setOption(option_aYhxDlXhjtvN);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="CDrZNZdGYGFK"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_CDrZNZdGYGFK = echarts.init(document.getElementById('CDrZNZdGYGFK'), "white");
    let option_CDrZNZdGYGFK = {
        title: {"text":"Liquid-形状(diamond)",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":false},"waveAnimation":true,"shape":"diamond","data":[0.3,0.4,0.5],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_CDrZNZdGYGFK.setOption(option_CDrZNZdGYGFK);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="JOzQjwoNvkIF"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_JOzQjwoNvkIF = echarts.init(document.getElementById('JOzQjwoNvkIF'), "white");
    let option_JOzQjwoNvkIF = {
        title: {"text":"Liquid-形状(pin)",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":false},"waveAnimation":true,"shape":"pin","data":[0.3,0.4,0.5],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_JOzQjwoNvkIF.setOption(option_JOzQjwoNvkIF);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="onPGDKWYjwCp"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_onPGDKWYjwCp = echarts.init(document.getElementById('onPGDKWYjwCp'), "white");
    let option_onPGDKWYjwCp = {
        title: {"text":"Liquid-形状(arrow)",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":false},"waveAnimation":true,"shape":"arrow","data":[0.3,0.4,0.5],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_onPGDKWYjwCp.setOption(option_onPGDKWYjwCp);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="NEZHJXWKIPeH"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_NEZHJXWKIPeH = echarts.init(document.getElementById('NEZHJXWKIPeH'), "white");
    let option_NEZHJXWKIPeH = {
        title: {"text":"Liquid-形状(triangle)",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"liquid","type":"liquidFill","outline":{"show":false},"waveAnimation":true,"shape":"triangle","data":[0.3,0.4,0.5],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_NEZHJXWKIPeH.setOption(option_NEZHJXWKIPeH);
</script>

    <br/>
<style>
    .container {display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>
